<ng-template #template>
  <div class="svc-logo-image" #container>
    <input type="file" aria-hidden="true" tabindex="-1" [accept]="model.acceptedTypes" class="svc-choose-file-input" />
    <ng-container *ngIf="!survey.locLogo.renderedHtml">
      <ng-container *ngIf="model.allowEdit && !model.isUploading">
        <div class="svc-logo-image-placeholder" (click)="model.chooseFile(model)" [key2click]>
          <svg>
            <use xlink:href="#icon-image-48x48"></use>
          </svg>
        </div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="survey.locLogo.renderedHtml && !model.isUploading">
      <div [class]="model.containerCss">
        <div class="svc-context-container svc-logo-image-controls">
          <span class="svc-context-button" (click)="model.chooseFile(model)" [key2click] [attr.title]="undefined"
            [attr.aria-label]="undefined">
            <svg [iconName]="'icon-choosefile'" [size]="'auto'" sv-ng-svg-icon></svg>
          </span>
          <span class="svc-context-button svc-context-button--danger" (click)="model.remove(model)" [key2click]
            [attr.title]="undefined" [attr.aria-label]="undefined">
            <svg [iconName]="'icon-clear'" [size]="'auto'" sv-ng-svg-icon></svg>
          </span>
        </div>
        <sv-logo-image [data]="survey"></sv-logo-image>
      </div>
    </ng-container>
    <div class="svc-logo-image__loading" *ngIf="model.isUploading">
      <sv-ng-loading-indicator></sv-ng-loading-indicator>
    </div>
  </div>
</ng-template>